

import React, { FC } from 'react'

// typescript 不过是 javascript 严格的语法模式  
// 所有的变量声明来源和类型 
// Typescript原始数据类型：
// string
// number
// boolean
// null
// undefined
// enum
// symbol
// 空值一般采用void表示，void可以表示变量，也可以表示函数返回值。
// any 任意类型
// Array 数组
// Object 对象
 
// public(公有)、private(私有)和protected(受保护的 ) 
// 公有变量 可以被子类继承  

class User{
    constructor(
        public id:number,
        public age:number,
        public name:string,
        public msg:string
    ){

    }
}

interface MyDemo{
    uid:number|string,
    deleteOne?:(id:number)=>void;
    updataOne:(id:number)=>void;
    getList:Function

}




 const Demo:FC<any> = ({
    uid,
    deleteOne,
    updataOne,
    getList
}) => {

    const num:string |number =100;
    const word:string = 'daydayup';
    const flag:boolean=true;
    const obj:object|null={};    

    interface Istate1{
        name:string,
        age:number,
        word:string
    }

    const person1:Istate1={
        name:"zkl",
        age:18,
        word:"todolikes"
    }

    interface Istate2{
        name:string,
        age:number,
     
    }

    const per2:Istate2={
        name:"zzm",
        age:20,
     
    }

    interface Istate3{
        name:string,
        age?:number,
        [propName:string]:any
     
    }
    const per3:Istate3={
        name:"zzm",
        age:20,
     
    }


    const test:any="214-daydayup"

      // 1) 可采用"类型[]"法表示；
  // 2) 可采用数组泛型“Array<类型>”表示法
  // 3) 可采用接口表示法。
  const arr1:number[] = [1,2,3,4,5]
  const arr2:string[] = ['NOde', "vue" ]
  const arr3:any[] = []

  const arr4:Array<number> = [1,23,3]
  const arr5:Array<any> = []
  const arr6:Array<string> = ['JS',"TS","JSX","TSX"]

  const arr7:Array<Istate2> = [
    {
      name:"666",
      age:19
    },
    {
      name:"张三",
      age:38 
    }
  ]

  const arr8:Istate2[] = [
     {
       name:"Bibi",
       age:29 
     }
  ]

  // Typescript函数类型： 
  // 函数约束：有函数本身的参数约束，返回值约束；
  // 还有函数本身赋值的变量的约束；


  function todolist(id:number,name:string):void{  // void表示没有返回值

  }

  function changeNum(payload:number):number{  //返回number
      return 123123;
  }
 
   const count :number = changeNum(123)

   const list:Array<User> = [
    new User(1,18,'zkl','missyou'),
    new User(1,18,'zkl','missyou'),
    new User(1,18,'zkl','missyou'),
    new User(1,18,'zkl','missyou'),
  ] 

  const list2:User[] = [
    new User(1,18,'zkl','missyou'),
    new User(1,18,'zkl','missyou'),
    new User(1,18,'zkl','missyou'),
    new User(1,18,'zkl','missyou'),
  ]

  const list3:User =    new User(1,18,'zkl','missyou') 




  return (
    <div>
        <h2>typescripts语法入门学习</h2>
    </div>
  )
}


export default Demo